/**
 * Created by duke on 2020/9/18.
 */
/**
 * Created by duke on 2020/9/16.
 */
import React from 'react';
import { PureComponent } from "react";
import { Layout, Row, Col, Menu, Select, Button, Carousel } from 'antd';
import { Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;
const { Option } = Select;
export default class Pos extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            path: localStorage.getItem("path"),
            current: '2',
            IsFooter1: false,
            IsFooter2: false,
            IsFooter3: false,
            IsFooter4: false,
        }
    };
    componentWillMount() {

    };
    componentDidMount() {

    };
    footer1Over = () => {
        this.setState({
            IsFooter1: true
        })
    }
    footer1Out = () => {
        this.setState({
            IsFooter1: false
        })
    }
    footer2Over = () => {
        this.setState({
            IsFooter2: true
        })
    }
    footer2Out = () => {
        this.setState({
            IsFooter2: false
        })
    }
    footer3Over = () => {
        this.setState({
            IsFooter3: true
        })
    }
    footer3Out = () => {
        this.setState({
            IsFooter3: false
        })
    }
    footer4Over = () => {
        this.setState({
            IsFooter4: true
        })
    }
    footer4Out = () => {
        this.setState({
            IsFooter4: false
        })
    }
    uposClick = () => {

        window.location.href = "/upos/";


    }
    questionClick = () => {
        window.location.href = "/question/";
    }
    chatClick = () => {
        window.location.href = "/chat/";
    }
    backTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
    }
    render() {
        let { path, current, IsFooter1, IsFooter2, IsFooter3, IsFooter4, } = this.state;
        return (
            <Layout style={{ background: '#fff', minWidth: '1500px', overflow: 'auto' }}>
                <Header style={{ width: '100%', }}>
                    <Row>
                        <Col span={4}></Col>
                        <Col span={16}>
                            <Row style={{ width: '100%' }}>
                                <Col span={4}>
                                    <img src={path + "images/header.png"} style={{ width: '143px', height: '26px' }} />
                                </Col>
                                <Col span={9}>
                                    <img src={path + "images/slogan.png"} style={{ width: '190px', height: '48px' }}></img>
                                </Col>
                                <Col span={11} style={{ position: 'relative' }}>
                                    <img src={path+"images/arrowDown.png"} style={{ width: '24px', position: 'absolute', top: '19px', left: '140px' }}></img>
                                    <Menu mode="horizontal" selectedKeys={[current]}>
                                        <Menu.Item key="0">
                                            <Link to="/" style={{  color: '#2B292D' }}>首页</Link>
                                        </Menu.Item>
                                        <SubMenu key="sub1" title="产品中心">
                                            <Menu.Item key="1">

                                                <Link to="/upos/"> 进销存管理系统</Link>
                                            </Menu.Item>
                                            <Menu.Item key="2">
                                                <Link to="/pos/">收银系统</Link>
                                            </Menu.Item>
                                            <Menu.Item key="3">
                                                <Link to="/posApp/">在线商城App</Link>
                                            </Menu.Item>

                                        </SubMenu>
                                        {/* <Menu.Item key="2">
                                        <Link to="/pos/">POS收银系统</Link>
                                    </Menu.Item>
                                    <Menu.Item key="3">
                                       <Link to="/posApp/">UPOS APP</Link>
                                    </Menu.Item> */}
                                        <Menu.Item key="4">
                                            <Link to="/question/">解决方案</Link>
                                        </Menu.Item>
                                        <Menu.Item key="5">
                                            <Link to="/chat/">关于我们</Link>
                                        </Menu.Item>

                                    </Menu>
                                </Col>

                            </Row>
                        </Col>
                        <Col span={4}></Col>
                    </Row>
                </Header>
                <Content>
                    <img src={path + "images/posBanner.png"} style={{ width: '100%' }}></img>
                    <div style={{ overflow: 'hidden', }}>
                        <div style={{ width: '1200px', margin: '0 auto', overflow: 'hidden', padding: '72px 0' }}>
                            <div style={{width:'1200px'}}>
                                <p style={{ color: '#151515', fontSize: '36px', fontWeight: '500', marginBottom: '24px' }}>收银功能介绍</p>
                                <div style={{ width: '1200px', height: '2px', background:'#9D9BA1'}}></div>
                                <div style={{ width: '72px', height: '6px', background: '#443C57' }}></div>
                            </div>
                            <div style={{ float: 'left' }}>
                                <img src={path + "images/posCollect.png"} style={{ width: '584px' }}></img>
                            </div>
                            <div style={{ float: "left", margin: '114px 0 0 133px', width: '483px' }}>
                               
                                <p style={{ color: '#151515', fontSize: '16px', fontWeight: '400', margin: '0' }}>对收银功能进行重新设计，更加符合操作习惯，从而带来工作效率的提升；将常用功能快捷化，增加“快捷商品”、”快捷结账“以及”快速抹零“等功能；针对客户提供了大屏客显，不仅提升了客户满意度，也提高了门店形象；</p>
                                <div style={{ margin: '96px 35px 0 0', background: '#00CBD8', color: '#ffffff', borderRadius: '2px', width: '224px', height: '54px', display: 'inline-block', lineHeight: '54px', textAlign: 'center' }}>
                                   
                                    <a href="https://www.youtube.com/watch?v=53RL_hTFr9s" target="_blank" style={{ color: '#ffffff', }}> 查看“收银操作”视频</a>
                                    </div>
                                
                            </div>
                        </div>
                    </div>
                    <div style={{ overflow: 'hidden', }} className="uposBanner">
                        <div style={{ width: '1200px', margin: '0 auto', overflow: 'hidden', padding: '72px 0' }}>
                            <div style={{ width: '1200px' }}>
                                <p style={{ color: '#151515', fontSize: '36px', fontWeight: '500', marginBottom: '24px' }}>退货功能介绍</p>
                                <div style={{ width: '1200px', height: '2px', background: '#9D9BA1' }}></div>
                                <div style={{ width: '72px', height: '6px', background: '#443C57' }}></div>
                            </div>
                            <div style={{ float: 'left' }}>
                                <img src={path + "images/posReturn.png"} style={{ width: '584px' }}></img>
                            </div>
                            <div style={{ float: "left", margin: '114px 0 0 133px', width: '483px' }}>

                                <p style={{ color: '#151515', fontSize: '16px', fontWeight: '400', margin: '0' }}>完善的退货风险控制，有效降低门店损失；客户退货时系统记录其退货次数，供员工查看，员工可以对客户备注其态度、行为等，方便下次退货时参考；针对每个退货商品记录退货原因，并产出退货商品报表，帮助门店识别“垃圾”商品。</p>
                                <div style={{ margin: '96px 35px 0 0', background: '#00CBD8', color: '#ffffff', borderRadius: '2px', width: '224px', height: '54px', display: 'inline-block', lineHeight: '54px', textAlign: 'center' }}>
                                   
                                    <a href="https://www.youtube.com/watch?v=_It64et6K-Q" target="_blank" style={{ color: '#ffffff', }}>  查看“退货操作”视频</a>
                                    </div>

                            </div>
                        </div>
                    </div>
                    <div style={{ overflow: 'hidden', marginbottom:'72px'}}>
                        <div style={{ width: '1200px', margin: '0 auto', overflow: 'hidden', padding: '72px 0' }}>
                            <div style={{ width: '1200px' }}>
                                <p style={{ color: '#151515', fontSize: '36px', fontWeight: '500', marginBottom: '24px' }}>离线模式介绍</p>
                                <div style={{ width: '1200px', height: '2px', background: '#9D9BA1' }}></div>
                                <div style={{ width: '72px', height: '6px', background: '#443C57' }}></div>
                            </div>
                            <div style={{ float: 'left' }}>
                                <img src={path + "images/posOff.png"} style={{ width: '584px' }}></img>
                            </div>
                            <div style={{ float: "left", margin: '114px 0 0 133px', width: '483px' }}>
                                <p style={{ color: '#151515', fontSize: '16px', fontWeight: '400', margin: '0' }}>离线模式是UPOS特有的功能，收银系统每隔30分钟会自动下载云进销存的商品等信息，防止发生门店断网 导致收银系统不可用的情况；断网时，收银系统会先保存断网期间产生的开单数据，待网络恢复正常后，第一时间将保存的数据上传到云进销存；</p>
                            
                            </div>
                        </div>
                    </div>
                   
                   
                </Content>
                <Footer style={{ background: '#001123', padding: '81px 0 0 0px', }}>
                    <div style={{ overflow: 'hidden', width: '1200px', margin: '0 auto' }}>
                        <div style={{ float: 'left' }}>
                            <img src={path + "images/logoUpos.png"} style={{ width: '143px', height: '26px' }} />
                        </div>
                        <div style={{ float: 'left', borderRight: '1px solid rgb(42,42,42)', padding: '0 90px 0px 196px', width: '588px' }}>
                            <a style={{ color: '#fff', fontSize: '16px', marginRight: '168px', }} className='aHover' >
                                <Link to="/upos/" style={{ color: '#fff', }} onClick={this.backTop}> 产品中心</Link>


                            </a>
                            <a style={{ color: '#fff', fontSize: '16px', }} className='aHover' >
                                <Link to="/question/" style={{ color: '#fff', }} onClick={this.backTop}>  解决方案</Link>


                            </a>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '22px' }}>进销存管理系统</p>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '12px' }}>收银系统</p>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '12px' }}>在线商品APP</p>
                            <p style={{ marginTop: '92px', }}>
                                <a style={{ color: '#fff', fontSize: '16px', }} href="/chat/" className='aHover' >
                                    <Link to="/chat/" style={{ color: '#fff', }} onClick={this.backTop}>    关于我们</Link>


                                </a>
                            </p>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '22px' }}>杭州青湘科技有限公司</p>
                            <div style={{ margin: '15px 0 0px 0', color: '#999999', fontSize: '14px', }}>
                                <span style={{ height: '16px', paddingRight: '20px', borderRight: '1px solid #999999', }}>杭州</span>
                                <span style={{ height: '16px', padding: '0px 16px 0px 16px', borderRight: '1px solid #999999', }}>上海</span>
                                <span style={{ height: '16px', padding: '0px 16px 0px 16px', borderRight: '1px solid #999999', }}>北京</span>
                                <span style={{ height: '16px', padding: '0px 16px 0px 16px', borderRight: '1px solid #999999', }}>深圳</span>
                                <span style={{ height: '16px', paddingLeft: '20px', }}>威尼斯</span>
                            </div>
                        </div>
                        <div style={{ float: 'left', paddingLeft: '86px', color: '#999999', }}>
                            <p style={{ fontSize: '16px' }}>中国联系方式：</p>
                            <div>
                                <img src={path + "images/weChat.png"} style={{ width: '24px', height: '24px' }}></img>
                                <span style={{ fontSize: '14px', marginLeft: '8px' }}>企业微信</span>

                            </div>
                            <div style={{ marginTop: '8px' }}>
                                <img src={path + "images/erweima.png"} style={{ width: '104px' }}></img>

                            </div>
                            <p style={{ fontSize: '16px', marginTop: '48px' }}>意大利销售专员：</p>
                            <div>
                                <img src={path + "images/phone.png"} style={{ width: '24px', height: '24px' }}></img>
                                <span style={{ fontSize: '14px', marginLeft: '8px' }}>韩先生手机</span>
                            </div>
                            <p style={{ fontSize: '14px', marginTop: '12px', color: '#fff' }}>+39/3778832691</p>
                        </div>
                        <div style={{ float: 'left', marginLeft: '117px', color: '#999', fontSize: '14px', paddingTop: '42px' }}>
                            <div>
                                <img src={path + "images/email.png"} style={{ width: '24px', height: '24px', }}></img>
                                <span style={{ fontSize: '14px', marginLeft: '8px' }}>Email</span>
                                <p style={{ color: '#fff', fontSize: '14px', marginTop: '8px' }}>support@imichi.cn</p>
                                <div style={{ marginTop: '172px' }}>
                                    <img src={path + "images/email.png"} style={{ width: '24px', height: '24px' }}></img>
                                    <span style={{ fontSize: '14px', marginLeft: '8px' }}>Email</span>
                                </div>
                                <p style={{ fontSize: '14px', marginTop: '12px', color: '#fff' }}>upositalia@gmail.com</p>
                            </div>
                        </div>
                    </div>
                    <div style={{ borderTop: '1px solid rgb(42,42,42)', marginTop: "79px", fontSize: '14px', color: '#999', textAlign: 'center', padding: '20px 0 22px' }}>版权所有 @杭州青湘科技有限公司</div>

                </Footer>

            </Layout>
        );
    }

}


